.columns {
  display: flex;
  margin: -0.75rem -0.75rem 0 -0.75rem;
  @media (--st-mobile) {
    &:not(.is-mobile) {
      flex-direction: column;
    }
  }
  @media (--st-desktop) {
    &.is-desktop {
      flex-direction: column;
    }
  }
  &.is-multiline {
    flex-wrap: wrap;
  }
  &.is-gapless {
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    &:not(:last-child) {
      margin-bottom: 1.5rem;
    }
    & .column {
      margin: 0;
      padding: 0 !important;
    }
  }
}

.column {
  flex: 1 1 auto;
  padding: .75rem;
  &.is-four-fifths {
    flex: 0 0 auto;
    width: 80%;
  }
  &.is-three-quarters {
    flex: 0 0 auto;
    width: 75%;
  }
  &.is-2 {
    flex: 0 0 auto;
    width: 16.66667%;
  }
  &.is-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  &.is-offset-2 {
    margin-left: 16.66667%;
  }
}
